<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单新增的属性</title>
    <link rel="stylesheet" href="../1-Html/global.css">
</head>
<body>
    <form action="123.php" method="GET" autocomplete="on" id="form">
        电话： <input type="tel" list="tel" autofocus="on" 
        required="required"><br>
        <datalist id="tel">
            <option value="1234"></option>
            <option value="124"></option>
            <option value="125"></option>
            <option value="126"></option>
        </datalist>

        正则表达式：<input type="text" pattern="[0-9]{5}" 
        required><br>

        提示： <input type="text" placeholder="输入文本"
        required="required"><br>

        <input type="submit" value="提交">
    </form>
    <p>form表单以外的input</p>
    <input type="text" form="form">


    <div class="learn">
        <h1>表单新增的属性</h1>
        <table border="1" cellspacing="0" cellpadding="10">
            <caption>表单新增的属性</caption>
            <thead><th>元素</th><th>描述</th></thead>
            <tbody>
                <tr>
                    <td>autocomplete</td>
                    <td>设置表单可以自动选择数据</td>
                </tr>
                <tr>
                    <td>autofocus</td>
                    <td>自动获取input的输入焦点</td>
                </tr>
                <tr>
                    <td>form</td>
                    <td>允许form表单以外的input可以被提交</td>
                </tr>
                <tr>
                    <td>pattern</td>
                    <td>用来定义表单的正则表达式</td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>规定用户必须输入</td>
                </tr>
                <tr>
                    <td>novaildate</td>
                    <td>关闭所有的表单验证</td>
                </tr>
            </tbody>
            <tfoot><tr><td>...</td><td>...</td></tr></tfoot>
        </table>

        
        <h1>辅助autocomplete的datalist标签</h1>
            <p>用法如上，但需要注意几点</p>
            
            <h2>注意</h2>
                <ul>
                    <li>自动完成的input需要添加一个list属性，该属性为datalist的
                        id值
                    </li>
                    <li>需要一个datalist的标签，标签中需要包裹所有的备选选项，使用
                        option标签
                    </li>
                </ul>
    </div>
</body>
</html>